<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="姓名或昵称" class="handle-input mr10"></el-input>
                <el-input v-model="query.phone" placeholder="手机号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="list.data" border class="table" ref="multipleTable">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="nikeName" label="昵称" v-if="this.$permissions.checkColumn('user_nikeName')">
                </el-table-column>
                <el-table-column prop="membersName" label="姓名" v-if="this.$permissions.checkColumn('user_membersName')">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" v-if="this.$permissions.checkColumn('user_phone')">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" v-if="this.$permissions.checkColumn('user_opera')">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" v-has="'user_edit'">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)" v-has="'user_del'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handlePageSize" @current-change="handlePageIndex" :current-page="query.pageIndex" :page-sizes="[10, 20, 30, 50, 150, 200]" layout="total, sizes, prev, pager, next, jumper" :page-size="query.pageSize" :total="list.total">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!-- <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">
                <el-form-item label="日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog> -->

        <!-- 删除提示框 -->
        <!-- <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
    // import { pageMembers } from '@/api/member'
    export default {
        data() {
            return {
                query: {
                    name: '',
                    phone: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                list: {
                    loading: false,
                    total: 0,
                    data: []
                },
            }
        },
        created() {
            this.getListData();
            
        },
        computed: {
            data() {
            }
        },
        methods: {
            getListData() {
                // pageMembers(this.query).then(res => {
                //     this.list.data = res.data.items;
                //     this.list.total = res.data.totalCount;
                // })
            },
            handlePageSize(pageSize) {
                this.query.pageSize = pageSize
                this.getListData()
            },
            handlePageIndex(pageIndex) {
                this.query.pageIndex = pageIndex
                this.getListData()
            },
            handleSearch() {
                this.query.pageIndex = 1
                this.query.pageSize = 10
                this.getListData()
            }
        }
    }

</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
</style>
